<!--
author: 何其沆(pooky)
desc: Others - Clients Support
date: 2021-11-12
-->
<template>
  <div class="clients-support">
    <Search @search="handleSearch" @reset="handleReset">
      <div style="display: flex">
        <SearchInput searchText="Source Language (required)">
          <a-select v-model:value="sourceLanguage" placeholder="Please select" @change="handleSlChange">
            <a-select-option value="0">All</a-select-option>
          </a-select>
        </SearchInput>
        <SearchInput searchText="Target Language (required)">
          <a-select v-model:value="targetLanguage" placeholder="Please select" @change="handleTlChange">
            <a-select-option value="0">All</a-select-option>
          </a-select>
        </SearchInput>
        <SearchInput searchText="Industry (required)">
          <a-select v-model:value="industry" placeholder="Please select" @change="handleIndustryChange">
            <a-select-option value="0">All</a-select-option>
          </a-select>
        </SearchInput>
        <SearchInput searchText="Currency (required)">
          <a-select v-model:value="currency" placeholder="Please select" @change="handleCurrencyChange">
            <a-select-option value="0">All</a-select-option>
          </a-select>
        </SearchInput>
        <SearchInput searchText="Recommended Price">
          <a-input v-model:value="recommendedPrice" placeholder="Input" />
        </SearchInput>
      </div>
      <div style="display: flex; margin-top: 20px">
        <SearchInput searchText="Translation Workflow">
          <a-select v-model:value="translationWorkflow" placeholder="Please select" @change="handleTwChange">
            <a-select-option value="0">TP</a-select-option>
          </a-select>
        </SearchInput>
        <SearchInput searchText="Total Word Count" iconType="tips">
          <a-input v-model:value="totalWordCount" placeholder="Input" />
        </SearchInput>
      </div>
    </Search>
    <div class="clients-support-main">
      <div class="main-price">
        <e-title title="Price" />
        <div class="price-banner">
          <banner title="Tier1" subTitle="1.056 RMB" style="margin-right: 180px" />
          <banner title="Tier2" subTitle="0.924 RMB" style="margin-right: 180px" />
          <banner title="Average Cost for T only" subTitle="0 RMB" />
        </div>
        <freeLances title="T for Freelances" />
        <freeLances title="E for Freelances" />
        <note
          content="The average translation cost is evaluated based on the number of resources who had translation assignments in
      related industry fields and their JAS over the last year, thus will be varied throughout the year. The estimate is
      just for a reference. Please always contact the pricing manager or project team lead for approval if you want to
      give a quotation at prices below Tier2." />
      </div>
      <div class="main-ebitda-price">
        <div class="main-ebitda">
          <e-title title="EBITDA %" />
          <div class="ebitda-banner">
            <banner title="EBITDA" subTitle="N/A" style="margin-right: 200px" />
            <banner title="EBITDA %" subTitle="N/A" style="margin-right: 200px" />
          </div>
        </div>
        <div class="main-price">
          <e-title title="Price" />
          <div class="price-banner">
            <banner title="For Standard Delivery" subTitle="N/A" style="margin-right: 115px" />
            <banner title="For Expedited Delivery" subTitle="N/A" style="margin-right: 115px" />
            <banner title="Available resources" subTitle="N/A" />
          </div>
          <note
            content="The average translation cost is evaluated based on the number of resources who had translation assignments in
      related industry fields and their JAS over the last year, thus will be varied throughout the year. The estimate is
      just for a reference. Please always contact the pricing manager or project team lead for approval if you want to
      give a quotation at prices below Tier2." />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

import ETitle from '@/components/ETitle.vue'
import Search from '../../components/Search.vue'
import SearchInput from '../../components/SearchInput.vue'
import banner from './components/banner.vue'
import note from './components/note.vue'
import freeLances from './components/freeLances.vue'

// 搜索条件
const sourceLanguage = ref(undefined)
const targetLanguage = ref(undefined)
const industry = ref(undefined)
const currency = ref(undefined)
const recommendedPrice = ref('')
const translationWorkflow = ref(undefined)
const totalWordCount = ref('')
/**
 * 切换Source Language
 * @param value
 */
const handleSlChange = value => {
  sourceLanguage.value = value
}
/**
 * 切换Target Language
 * @param value
 */
const handleTlChange = value => {
  targetLanguage.value = value
}
/**
 * 切换Industry
 * @param value
 */
const handleIndustryChange = value => {
  industry.value = value
}
/**
 * 切换Currency
 * @param value
 */
const handleCurrencyChange = value => {
  currency.value = value
}
/**
 * 切换Translation Workflow
 * @param value
 */
const handleTwChange = value => {
  translationWorkflow.value = value
}
/**
 * 搜索
 */
const handleSearch = () => {}
/**
 * 重置
 */
const handleReset = () => {}
</script>

<style scoped lang="less">
@import '@/assets/style/reset_form';

.clients-support-main {
  margin-top: 24px;
  width: 100%;
  height: 696px;
  display: flex;
  box-sizing: border-box;
  .main-price {
    flex: 1;
    background-color: @white;
    border-radius: 4px;
    box-shadow: 0 1px 3px @shadow-color;
    margin-right: 24px;
    padding: 32px 24px 24px 24px;
    box-sizing: border-box;
    .price-banner {
      display: flex;
      margin-top: 20px;
      padding-left: 13px;
    }
  }
  .main-ebitda-price {
    flex: 1;
    display: flex;
    flex-direction: column;
    .main-ebitda {
      width: 100%;
      height: 145px;
      margin-bottom: 24px;
      background-color: @white;
      border-radius: 4px;
      box-shadow: 0 1px 3px @shadow-color;
      padding-top: 32px;
      padding-left: 24px;
      .ebitda-banner {
        display: flex;
        margin-top: 20px;
        padding-left: 13px;
      }
    }
    .main-price {
      width: 100%;
      flex: 1;
      background-color: @white;
      border-radius: 4px;
      box-shadow: 0 1px 3px @shadow-color;
      .price-banner {
        display: flex;
        margin-top: 20px;
        padding-left: 13px;
      }
    }
  }
}
</style>
<route lang="yaml">
name: Clients Support
path: /clients-support/
</route>
